jQuery — Show Animations

jQuery is a popular JavaScript for creating dynamic web pages.

In this article, we’ll look at how to using jQuery in our web apps.

.show()

The show displays the matched elements.

For example, if we have the following HTML:

<div id="clickme">
  Click here
</div>
<img id="book" src="https://i.picsum.photos/id/23/200/200.jpg?hmac=IMR2f77CBqpauCb5W6kGzhwbKatX_r9IvgWj6n7FQ7c">

And CSS:

img {
  display: none;
}

Then we can call the show method to show the image when we click on Click here by writing:

$("#clickme").click(function() {
  $("#book").show("slow", function() {
    // Animation complete.
  });
});

.siblings()

The siblings method lets us get the siblings of each element in the set of matched elements.

We can optionally pass in a selector into this method.

For example, if we have:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li class="third-item">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

Then we can get all the li s that are sibling of the one with the class third-item and add a background to it:

$("li.third-item").siblings().css("background-color", "red");

.slice()

The slice method lets us reduce a set of matched elements to a subset specified by the range of indexes.

For example, if we have:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

Then we get the li starting with index 2 and up to and not including 4 by writing:

$("li").slice(2, 4).css("background-color", "red");

.slideDown()

The .slideDown() method displays the matched elements with a sliding motion.

For example, if we have the following HTML:

<div id="clickme">
  Click here
</div>
<img id="book" src="https://i.picsum.photos/id/23/200/200.jpg?hmac=IMR2f77CBqpauCb5W6kGzhwbKatX_r9IvgWj6n7FQ7c">

And CSS:

img {
  display: none;
}

Then we can get show the image with a slide down animation when we click on Click here by writing:

$( "#clickme" ).click(function() {
  $( "#book" ).slideDown( "slow", function() {
    // Animation complete.
  });
});

.slideToggle()

The .slideToggle() method lets us display or hide the matched elements with the sliding motion.

For example, if we have the following HTML:

<div id="clickme">
  Click here
</div>
<img id="book" src="https://i.picsum.photos/id/23/200/200.jpg?hmac=IMR2f77CBqpauCb5W6kGzhwbKatX_r9IvgWj6n7FQ7c">

And CSS:

img {
  display: none;
}

Then we can get toggle the image with a slide animation when we click on Click here by writing:

$( "#clickme" ).click(function() {
  $( "#book" ).slideToggle( "slow", function() {
    // Animation complete.
  });
});

.slideUp()

The .slideUp() method hides the matched elements with a sliding motion.

For example, if we have the following HTML:

<div id="clickme">
  Click here
</div>
<img id="book" src="https://i.picsum.photos/id/23/200/200.jpg?hmac=IMR2f77CBqpauCb5W6kGzhwbKatX_r9IvgWj6n7FQ7c">

Then we can get hide the image with a slide up animation when we click on Click here by writing:

$( "#clickme" ).click(function() {
  $( "#book" ).slideUp( "slow", function() {
    // Animation complete.
  });
});

.stop()

The stop method stops the currently running animation on the matched elements.

For example, if we have:

<div id="hoverme">
  Hover me
  <img id="hoverme" src="https://i.picsum.photos/id/23/200/200.jpg?hmac=IMR2f77CBqpauCb5W6kGzhwbKatX_r9IvgWj6n7FQ7c">
</div>

Then we can stop the animation on the matched element by writing:

$("#hoverme").hover(function() {
  $(this).find("img").stop(true, true).fadeOut();
}, function() {
  $(this).find("img").stop(true, true).fadeIn();
});

When we hover over the img with ID hover , then we fade out the image.

Otherwise, we fade in the image.

Conclusion

We can add various effects to our DOM elements with jQuery.